import { Switch, Table, Tag } from 'antd'

import React, { memo, useEffect, useState } from 'react'
import {
  fetchCommentChangeStatus,
  fetchCommentTableData,
} from '../../api/comment'
import ThemeCard from '../../components/themeCard'
import './style.less'
import { ITableItem } from './types'
const Comment: React.FC = () => {
  const [current, setCurrent] = useState<number>(1)
  const [total, setTotal] = useState<number>(0)
  const [pageSize, setPageSize] = useState<number>(10)
  const [tableData, setTableData] = useState<ITableItem[]>([])
  useEffect(() => {
    reqData()
  }, [])

  const reqData = () => {
    fetchCommentTableData({
      page: 1,
      per_page: 10,
      response_type: 'comment',
    }).then((res: any) => {
      if (res!.message === 'OK' && res.data) {
        setTotal(res.data.total_count)
        setTableData(res.data.results || [])
      }
      console.log(res)
    })
  }

  const handleTableChange = (val: any) => {
    const { current, pageSize } = val
    setCurrent(current)
    setPageSize(pageSize)
  }

  const handleSwitchChange = (id: number, flag: boolean) => {
    fetchCommentChangeStatus(id, {
      allow_comment: flag,
    }).then((res: any) => {
      if (res.message === 'OK' && res.data) {
        const { allow_comment, article_id } = res.data
        const list = tableData.map((v) => {
          if (v.id === article_id) {
            return {
              ...v,
              comment_status: allow_comment,
            }
          }
          return v
        })
        setTableData(list)
      }
    })
  }

  // comment_status: true
  // fans_comment_count: 0
  // id: 141429
  // title: "python如何学"
  // total_comment_count: 398

  const columns = [
    {
      title: '标题',
      dataIndex: 'title',
    },
    {
      title: '总评分数',
      dataIndex: 'total_comment_count',
    },
    {
      title: '粉丝评论数',
      dataIndex: 'fans_comment_count',
    },
    {
      title: '评论状态',
      key: 'id',
      render: (val: ITableItem) => {
        return (
          <Tag color={val.comment_status ? 'geekblue' : 'volcano'}>
            {val.comment_status ? '开启' : '关闭'}
          </Tag>
        )
      },
    },
    {
      title: '操作',
      key: 'id',
      render: (val: ITableItem) => {
        return (
          <Switch
            defaultChecked={val.comment_status}
            onChange={(flag) => handleSwitchChange(val.id, flag)}
          ></Switch>
        )
      },
    },
  ]
  const pageSizeOptions = [10, 20, 30, 40, 50]
  const showTotal = (total: number) => `共${total} 条`
  return (
    <div className="commtent">
      <ThemeCard title="内容管理">
        <Table
          rowKey={(v) => v.id}
          dataSource={tableData}
          columns={columns}
          onChange={handleTableChange}
          pagination={{
            current,
            total,
            pageSize,
            pageSizeOptions,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal,
          }}
          scroll={{
            y: 500,
          }}
        />
      </ThemeCard>
    </div>
  )
}

export default memo(Comment)
